<template>
  <div>
    <!-- <el-form ref="form" :rules="rules" :model="form"  :inline="true"> -->
    <el-form ref="form" :rules="rules" :model="form" :inline="false">
      <el-form-item prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item prop="repass">
        <el-input v-model="form.repass"></el-input>
      </el-form-item>

      <el-form-item prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>

      <el-form-item>
        <el-input
          prefix-icon="el-icon-search"
          suffix-icon="el-icon-date"
          v-model="form.code"
          placeholder="请输入验证码"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="reset('form')">重置</el-button>
      </el-form-item> </el-form
    >==={{ form.name }}
    <div @click="btn" ref="box" id="btn">点我</div>
  </div>
</template>
             
<script>
export default {
  data() {
    var validatePass2 = (rule, value, callback) => {
      console.log(value, 8888) //  value是表单值
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    var validateMobile = (rule, value, callback) => {
      let reg =
        /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
      console.log(reg.test(value), 66666)
      //console.log(value, 8888) //  value是表单值
      if (value === '') {
        callback(new Error('请再次输入手机号'))
      } else if (!reg.test(value)) {
        callback(new Error('手机输入格式不正确'))
      } else {
        callback()
      }
    }
    return {
      form: {
        name: '',
        password: '',
        repass: '',
        mobile: '',
        code: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' },
        ],
        repass: [{ validator: validatePass2, trigger: 'blur' }],
        mobile: [{ validator: validateMobile, trigger: 'blur' }],
      },
    }
  },
  created() {
    console.log(this, 'login==>6666')
  },
  methods: {
    onSubmit() {
      console.log('submit!')
      this.$refs['form'].validate((valid) => {
        console.log(valid, 999)
        if (valid) {
          //  说明：form表单校验成功
          //  可以发送请求
          alert('submit!')
        } else {
          //  校验不成功
          console.log('error submit!!')
          return false
        }
      })
    },
    btn() {
      console.log(this.$refs.box, 777)
      console.log(this.$refs['box'], 777)
    },

    reset(ff) {this.$refs.form.resetFields()
      
      //this.$refs['form'].resetFields()
      //this.$refs[ff].resetFields()
    },
  },
}
</script>
<style lang='less'  scoped>
.el-form {
  width: 400px;
  height: 350px;
  margin: 20px auto;
}
</style>